<el-dialog
    v-model="DialogData.visible"
    :title="DialogData.types=='add'?'创建栏目':'编辑栏目'"
    width="60%"
    @open="OperationShow"
    @closed="OperationClose"
    :close-on-click-modal="!DialogData.loading"
    :close-on-press-escape="!DialogData.loading"
    :show-close="!DialogData.loading">
    <el-form 
        :model="DialogData" 
        label-width="120px" 
        label-suffix="："
        :rules="OperationRules"
        ref="OperationRef"
        v-loading="DialogData.loading">
        <el-form-item label="图标">
            <el-upload
                class="avatar-uploader"
                name="files"
                accept="image/gif,image/png,image/jpg,image/jpeg,image/svg"
                action="{MOD_URL}&op=bannerinterfcae&do=upload" 
                :show-file-list="false"
                name="files[]"
                :on-success="handleAvatarSuccess">
                <template  v-if="DialogData.img">
                    <div class="el-upload-list__item-actions">
                        <span class="el-upload-list__item-delete" @click.stop="OperationCloseImage">
                            <el-icon><Delete /></el-icon>
                        </span>
                    </div>
                </template>
                <el-image v-if="DialogData.img" :src="DialogData.img" style="width: 100px; height: 100px;"  fit="cover" >
                    <template #error><div class="el-image__placeholder"></div></template>
                </el-image>
                <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
            </el-upload>
        </el-form-item>
        <el-form-item label="名称" prop="bannername">
            <el-input style="width: 50%;" v-model="DialogData.bannername"  ></el-input>
        </el-form-item>
        <template v-if="DialogData.types!='add' && DialogData.type != 3">
            <el-form-item label="访问地址">
                <div style="display: flex;flex: 1;">
                    <el-input 
                        style="max-width: 50%;"
                        v-model="DialogData.address"
                        :disabled="parseFloat(DialogData.pathinfo)?false:true"
                        @input="SettingAddressInput"
                        maxlength="30">
                        <template #prepend>{$_G['siteurl']}</template>
                    </el-input>
                    <div style="white-space: nowrap;margin-left: 12px;">
                        <el-button icon="CopyDocument" @click="RightCopyUrl(DialogData.address)" plain>复制链接</el-button>
                        <el-popover
                            placement="top"
                            popper-class="qrcode-box"
                            :width="224"
                            :teleported="false"
                            @before-enter="TableGeturlqrcode"
                            trigger="hover">
                            <div v-loading="!SettingQrcode.isqrcode" style="width: 200px;font-size: 0;">
                                <el-image draggable="false" v-if="SettingQrcode.qrcodeurl" style="width: 200px; height: 200px" :src="SettingQrcode.qrcodeurl" fit="contain">
                                    <template #error><div class="el-image__placeholder"></div></template>
                                </el-image>
                                <el-text tag="p" style="text-align: center;padding-top: 12px;">手机扫码 查看网站</el-text>
                                <div v-if="SettingQrcode.qrcodeurl" class="download" @click="TableDownQrcodeurl(SettingQrcode.qrcodeurl)">
                                    <div style="text-align: center;">
                                        <el-icon style="font-size: 22px;"><Download /></el-icon>
                                        <el-text tag="p" style="width: 100%;">下载二维码</el-text>
                                    </div>
                                </div>
                            </div>
                            <template #reference>
                                <el-button plain>
                                    <template #icon>
                                        <el-icon>
                                            <svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" ><path d="M384 64l-249.6 0c-51.2 0-89.6 41.6-89.6 89.6l0 227.2c0 51.2 41.6 89.6 89.6 89.6l249.6 0c51.2 0 89.6-41.6 89.6-89.6l0-227.2C473.6 105.6 435.2 64 384 64zM428.8 380.8c0 25.6-19.2 44.8-44.8 44.8l-249.6 0c-25.6 0-44.8-19.2-44.8-44.8l0-227.2c0-25.6 19.2-44.8 44.8-44.8l249.6 0c25.6 0 44.8 19.2 44.8 44.8L428.8 380.8z"></path><path d="M192 192l134.4 0 0 134.4-134.4 0 0-134.4Z"></path><path d="M377.6 544l-243.2 0c-48 0-86.4 38.4-86.4 89.6l0 220.8c0 48 38.4 89.6 86.4 89.6l243.2 0c48 0 86.4-38.4 86.4-89.6l0-220.8C467.2 582.4 425.6 544 377.6 544zM422.4 851.2c0 25.6-19.2 44.8-44.8 44.8l-243.2 0c-25.6 0-44.8-19.2-44.8-44.8l0-220.8c0-25.6 19.2-44.8 44.8-44.8l243.2 0c25.6 0 44.8 19.2 44.8 44.8L422.4 851.2z" ></path><path d="M192 668.8l131.2 0 0 131.2-131.2 0 0-131.2Z"></path><path d="M633.6 470.4l249.6 0c51.2 0 89.6-41.6 89.6-89.6l0-227.2c0-51.2-41.6-89.6-89.6-89.6l-249.6 0c-51.2 0-89.6 41.6-89.6 89.6l0 227.2C544 432 585.6 470.4 633.6 470.4zM588.8 153.6c0-25.6 19.2-44.8 44.8-44.8l249.6 0c25.6 0 44.8 19.2 44.8 44.8l0 227.2c0 25.6-19.2 44.8-44.8 44.8l-249.6 0c-25.6 0-44.8-19.2-44.8-44.8L588.8 153.6z"></path><path d="M700.8 192l134.4 0 0 134.4-134.4 0 0-134.4Z"></path><path d="M572.8 716.8l137.6 0c12.8 0 22.4-9.6 22.4-22.4l0-137.6c0-12.8-9.6-22.4-22.4-22.4l-137.6 0c-12.8 0-22.4 9.6-22.4 22.4l0 137.6C550.4 707.2 560 716.8 572.8 716.8z"></path><path d="M886.4 563.2l0 38.4c0 12.8 12.8 25.6 25.6 25.6l38.4 0c12.8 0 25.6-12.8 25.6-25.6l0-38.4c0-12.8-12.8-25.6-25.6-25.6l-38.4 0C899.2 537.6 886.4 547.2 886.4 563.2z"></path><path d="M582.4 944l48 0c12.8 0 22.4-9.6 22.4-22.4l0-48c0-12.8-9.6-22.4-22.4-22.4l-48 0c-12.8 0-22.4 9.6-22.4 22.4l0 48C560 934.4 569.6 944 582.4 944z"></path><path d="M944 704l-99.2 0c-16 0-28.8 12.8-28.8 28.8l0 44.8-48 0c-19.2 0-32 12.8-32 32l0 99.2c0 16 12.8 28.8 28.8 28.8l179.2 3.2c16 0 28.8-12.8 28.8-28.8l0-179.2C972.8 716.8 960 704 944 704z" ></path></svg>
                                        </el-icon>
                                    </template>
                                    获取二维码
                                </el-button>
                            </template>
                        </el-popover>
                        
                    </div>
                </div>
            </el-form-item>
        </template>
        <el-form-item label="状态">
            <el-switch v-model="DialogData.isshow" :active-value="1" :inactive-value="0" :disabled="DialogData.notallowedit"></el-switch>
        </el-form-item>
        <el-form-item label="数据类型">
            <el-radio-group v-model="DialogData.type" @change="OperationGetTypesChange" :disabled="DialogData.notallowedit">
                <el-radio :label="0" size="large">库</el-radio>
                <!-- <el-radio :label="1" size="large">智能数据</el-radio> -->
                <el-radio :label="2" size="large">单页</el-radio>
                <el-radio :label="3" size="large">链接</el-radio>
                <!-- <el-radio :label="4" size="large">专辑</el-radio> -->
            </el-radio-group>
        </el-form-item>
        <el-form-item label="数据来源" prop="value" v-if="DialogData.type != 5">
            <template v-if="DialogData.type == 3">
                <el-input style="width: 50%;" v-model="DialogData.value" @input="SettingLinkInput"></el-input>
            </template>
            <template v-else>
                <el-select style="width: 50%;" v-model="DialogData.value" @change="OperationValue" :disabled="DialogData.notallowedit">
                        <template v-if="DialogData.type == 0">
                            <el-option
                                v-for="item in DialogData.dataList.ku"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id"></el-option>
                        </template>
                        <template v-else-if="DialogData.type == 1">
                            <el-option
                                v-for="item in DialogData.dataList.sources"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id"></el-option>
                        </template>
                        <template v-else-if="DialogData.type == 2">
                            <el-option
                                v-for="item in DialogData.dataList.alonepage"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id"></el-option>
                        </template>
                        <template v-else-if="DialogData.type == 4">
                            <el-option
                                v-for="item in DialogData.dataList.tab"
                                :key="item.gid"
                                :label="item.name"
                                :value="item.gid"></el-option>
                        </template>
                  </el-select>
            </template>
            
        </el-form-item>
    </el-form>
<template #footer>
<span class="dialog-footer">
    <el-button @click="DialogData.visible = false" :disabled="DialogData.loading">取消</el-button>
    <el-button type="primary" @click="OperationSubmit" :disabled="DialogData.loading">确定</el-button>
</span>
</template>
</el-dialog>
<script>
    const OperationMixi = {
        data(){
            return {
                DialogData:{
                    visible:false,
                    loading:true,
                    pathinfo:parseFloat('{$_G['setting']['pathinfo']}'),
                    types:'add',
                    direction:'top',
                    ftypes:'',
                    address:'',
                    img:'',
                    aid:0,
                    bannername:'',
                    isshow:1,
                    type:0,
                    value:'',
                    valuename:'',
                    node:null,
                    dataList:{
                        ku:[],
                        sources:[],
                        alonepage:[],
                        tab:[]
                    },
                    notallowedit:0
                },
                OperationRules:{
                    bannername: [
                        { required: true, message: '栏目名称不能为空', trigger: 'blur' },
                    ],
                    value: [
                        { required: true, message: '数据来源不能为空', trigger: 'change' },
                    ],
                },
                SettingQrcode:{
					isqrcode:false,
					qrcodeurl:''
				},
                SettingAddressOld:'',
            }
        },
        methods:{
            SettingAddressInput(value){
                const regex = /^[a-zA-Z_0-9]+$/;
                if (!regex.test(value)) {
                    this.DialogData.address = this.SettingAddressOld;
                }else{
                    this.SettingAddressOld = value;
                }
            },
            SettingLinkInput(value){
                let re = /[\u4e00-\u9fa5]/g;  // 匹配任何中文字符
                if (re.test(value)) {
                    // 如果输入中包含中文字符，将其值设置为上一个有效的值
                    this.DialogData.value = this.DialogData.value.replace(re, '');
                }
            },
            OperationAddNew(type){
                this.DialogData.direction = type;
                this.DialogData.visible=true;
            },
            OperationClose(){
                this.DialogData = {
                    visible:false,
                    loading:true,
                    types:'add',
                    pathinfo:parseFloat('{$_G['setting']['pathinfo']}'),
                    direction:'top',
                    ftypes:'',
                    img:'',
                    aid:0,
                    bannername:'',
                    isshow:1,
                    type:0,
                    value:'',
                    valuename:'',
                    node:null,
                    dataList:{
                        ku:[],
                        sources:[],
                        alonepage:[],
                        tab:[]
                    }
                };
                this.SettingQrcode = {
					isqrcode:false,
					qrcodeurl:''
				}
            },
            OperationCloseImage(){
                this.DialogData.aid = 0;
                this.DialogData.img = '';
            },
            OperationValue(){
                let value = this.DialogData.value;
                let stype = this.DialogData.type;
                switch(stype){
                    case 0://库
                        var data = this.DialogData.dataList.ku;
                    break;
                    case 1://智能数据
                        var data = this.DialogData.dataList.sources;
                    break;
                    case 2://单页
                        var data = this.DialogData.dataList.alonepage;
                    break;
                    case 3://链接
                        var data = [];
                    break;
                    case 4://专辑
                        var data = this.DialogData.dataList.tab;
                    break;
                }
                let curr = data.find((current) => {
                    return current.id == value;
                });
                if(curr){
                    this.DialogData.valuename = curr.name;
                }else{
                    this.DialogData.valuename = '';
                }
            },
            handleAvatarSuccess(response, uploadFile, uploadFiles){
                const self = this;
                if(response.files[0].error){
                    self.$message.error(response.files[0].error)
                }else{
                    this.DialogData.img = response.files[0].data.img;
                    this.DialogData.aid = response.files[0].data.aid;
                }
                
            },
            OperationShow(){
                if(this.DialogData.types == 'add'){
                    this.DialogData.loading = false;
                    this.OperationGetTypes();
                }else{
                    this.DialogData.loading = true;
                    this.OperationGetData();
                }
            },
            //获取二维码
			async TableGeturlqrcode(){
                const self = this;
                if(this.SettingQrcode.isqrcode)return false;
				var {data: res} = await axios.post(BaseUrl+'&do=geturlqrcode',{
					id:self.DialogData.node.data.id
				});
				if(res.success){
					this.SettingQrcode.isqrcode = true;
                    this.SettingQrcode.qrcodeurl = res.qrcode;
				}else{
					self.$message.error(res.msg || '二维码获取失败');
				}
				
			},
            async OperationGetData(){
                const self = this;
                const {data: res} = await axios.post(BaseUrl+'&do=editbannerdata',{
                    bid:this.DialogData.node.data.id,
                });
                self.DialogData.loading = false;
                if(res.success){
                    self.DialogData.img = res.data.iconpath;
                    self.DialogData.aid = res.data.icon;
                    self.DialogData.bannername = res.data.bannername;
                    self.DialogData.type = parseInt(res.data.btype);
                    self.DialogData.isshow = parseInt(res.data.isshow);
                    self.DialogData.address = res.data.url;
                    self.SettingAddressOld = res.data.url;
                    self.DialogData.value = res.data.bdata;
                    self.DialogData.notallowedit = parseFloat(res.data.notallowedit);
                    self.OperationGetTypes();
                }else{
                    self.DialogData.visible = false;
                    self.$message.error(res.msg || '数据获取失败');
                }
            },
            OperationGetTypesChange(val){
                if(parseInt(val) == 5)return false;
                this.DialogData.value = '';
                this.DialogData.valuename = '';
                this.OperationGetTypes();
            },
            async OperationGetTypes(){
                const self = this;
                let stype = self.DialogData.type;
                
                if(stype == 0 && self.DialogData.dataList.ku.length){
                    self.OperationValue();
                    return false;
                }
                if(stype == 1 && self.DialogData.dataList.sources.length){
                    self.OperationValue();
                    return false;
                }
                if(stype == 2 && self.DialogData.dataList.alonepage.length){
                    self.OperationValue();
                    return false;
                }
                if(stype == 4 && self.DialogData.dataList.tab.length){
                    self.OperationValue();
                    return false;
                }
                if(stype == 3){
                    return false;
                }
                if(stype == 2 ){
                    var {data: res} = await axios.post(BaseUrl+'&do=getalonepage');
                }else if(stype == 4){    
                    var {data: res} = await axios.post(BaseUrl+'&do=gettabdata');
                }else{
                    var {data: res} = await axios.post(BaseUrl+'&do=getapporsources',{
                        stype:stype,
                    });
                }
                
                if(res.success){
                    if(stype == 0){
                        self.DialogData.dataList.ku = res.data;
                    }else if(stype == 1){
                        self.DialogData.dataList.sources = res.data;
                    }else if(stype == 2){
                        self.DialogData.dataList.alonepage = res.data;
                    }else if(stype == 4){
                        self.DialogData.dataList.tab = res.data;
                    }
                    self.OperationValue();
                }else{
                    self.$message.error(res.msg || '数据源数据获取失败');
                }
            },
            OperationSubmit(){
                const self = this;
                self.$refs.OperationRef.validate(function(valid){
                    if(valid){
                        if(self.DialogData.types == 'add'){
                            self.OperationAddSubmit();
                        }else{
                            self.OperationEditSubmit();
                        }
                        
                    }
                })
            },
            async OperationAddSubmit(){
                const self = this;
                self.DialogData.loading = true;
                let param = {
                    addbanner:true,
                    formhash:'{FORMHASH}',
                    bannername:self.DialogData.bannername,
                    btype:self.DialogData.type,
                    isbottom:self.DialogData.direction=='top'?0:1,
                    icon:self.DialogData.aid,
                    isshow:self.DialogData.isshow,
                    bdata:self.DialogData.value,
                    pid:0,
                    disp:self.DialogData.direction=='top'?self.treeData.top.length:self.treeData.bottom.length
                };
               
                if(self.DialogData.ftypes == 'child'){
                    param.pid = self.DialogData.node.data.id;
                    param.disp = self.DialogData.node.data.children.length;
                }else if(self.DialogData.ftypes == 'sibling'){
                    if(self.DialogData.node && self.DialogData.node.level > 1){
                        param.pid = self.DialogData.node.parent.data.id;
                        param.disp = self.DialogData.node.parent.data.children.length;
                    }
                }   
                const {data: res} = await axios.post(BaseUrl+'&do=addbanner',param);
                self.DialogData.loading = false;
                if(res.success){
                    let str = {
                        id:res.data.bid,
                        bannername:self.DialogData.bannername,
                        icon:self.DialogData.img,
                        soucresname:self.DialogData.valuename,
                        isshow:self.DialogData.isshow+'',
                        btype:self.DialogData.type
                    };
                    let stype = self.DialogData.type;
                    if(stype >2){
                        str.soucresname = self.DialogData.value;
                    }
                    if(self.DialogData.node){
                        if(self.DialogData.ftypes == 'child'){
                            self.DialogData.node.data.children.push(str);
                        }else if(self.DialogData.ftypes == 'sibling'){
                            if(self.DialogData.node.level > 1){
                                self.DialogData.node.parent.data.children.push(str);
                            }else{
                                self.treeData[self.DialogData.direction].push(str);
                            }
                        }
                    }else{
                        self.treeData[self.DialogData.direction].push(str);
                    }
                    self.DialogData.visible = false;
                }else{
                    self.$message.error(res.msg || '提交失败');
                }
            },
            async OperationEditSubmit(){
                const self = this;
                self.DialogData.loading = true;
                const {data: res} = await axios.post(BaseUrl+'&do=editbannerdata',{
                    editbanner:true,
                    formhash:'{FORMHASH}',
                    bid:self.DialogData.node.data.id,
                    address:self.DialogData.address,
                    bannername:self.DialogData.bannername,
                    btype:self.DialogData.type,
                    icon:self.DialogData.aid,
                    isshow:self.DialogData.isshow,
                    bdata:self.DialogData.value,
                    disp:self.DialogData.node.data.disp,
                    pid:self.DialogData.node.data.pid,
                    isbottom:self.DialogData.direction=='top'?0:1,
                });
                self.DialogData.loading = false;
                if(res.success){
                    let stype = self.DialogData.type;
                    self.DialogData.node.data.icon = self.DialogData.img;
                    self.DialogData.node.data.bannername = self.DialogData.bannername;
                    if(stype < 3){
                        self.DialogData.node.data.soucresname = self.DialogData.valuename;
                    }else{
                        self.DialogData.node.data.soucresname = self.DialogData.value;
                    }
                    self.DialogData.node.data.btype = self.DialogData.type;
                    self.DialogData.node.data.isshow = self.DialogData.isshow+'';
                    self.DialogData.visible = false;
                    self.$message({
                        type:'success',
                        message:'编辑成功'
                    })
                }else{
                    self.$message.error(res.msg || '编辑失败');
                }
            },
            RightCopyUrl(url){
				const self = this;
				var input = document.createElement('input'); input.setAttribute('id', 'copyInput');
				input.setAttribute('value', '{$_G['siteurl']}'+url);
				document.getElementsByTagName('body')[0].appendChild(input);
				document.getElementById('copyInput').select();
				document.execCommand('copy')
				self.$message({
					message: '成功复制到剪切板',
					type: 'success'
				});
				document.getElementById('copyInput').remove();
			},
        }
    }
</script>